<template>
  <el-scrollbar style="height: 98vh;">
    <h1>流程控制台</h1>
    <div style="width: 97vw;height: 50px">
      <span style="float:left;margin-left: 5px;font-weight: 700;">当前用户：</span>
      <el-select size="mini" v-model="user" style="float:left;">
        <el-option key="10233" label="张三" value="10233"/>
        <el-option key="10234" label="李四" value="10234"/>
        <el-option key="10235" label="王五" value="10235"/>
      </el-select>
    </div>
    <div style="width: 97vw;height: 50px">
      <h3 style="float:left;margin-left: 5px;">发起流程</h3>
    </div>
    <el-table :data="deploys" :default-sort="{prop: 'version', order: 'descending'}"
              style="margin-left: 100px;width: 80%;border: 1px slategray solid;margin-bottom: 10px;height: 100px;">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="流程名称" prop="key"/>
      <el-table-column label="部署ID" prop="deploymentId"/>
      <el-table-column label="资源" prop="resourceName"/>
      <el-table-column label="版本" prop="version" sortable/>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button size="mini" @click="startFlow(scope.row.deploymentId)">启动</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="width: 97vw;height: 50px">
      <h3 style="float:left;margin-left: 5px;">待处理</h3>
    </div>
    <!--    getDeployList-->
    <el-table title="待处理" :data="data" height="300"
              style="margin-left: 100px;width: 80%;border: 1px slategray solid;margin-bottom: 10px;height: 200px;">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="任务名称" prop="name"/>
      <el-table-column label="处理者" prop="assignee"/>
      <el-table-column label="创建时间" prop="createTime"/>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button size="mini" @click="showForm(scope.row)">处理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="width: 97vw;height: 50px">
      <h3 style="float:left;margin-left: 5px;">表单</h3>
    </div>
    <!--      <div v-html="formStyle"/>-->
    <form-engine :data="formData" :form-style="formStyle" @submit="submit" :task-key="taskKey"/>
  </el-scrollbar>
</template>

<script>
import {getDeployList, getFormData, getTaskForm, getTasksById, start, submitTask} from "@/api/flow";
import FormEngine from "@/components/FormEngine";

export default {
  name: "HomePage",
  components: {FormEngine},
  watch:{
    user:{
      handler() {
        this.initTaskList()
      }
    }
  },
  data() {
    return {
      data: [],
      deploys: [],
      user:'10233',
      deployId: "",
      formStyle: "",
      formData: "",
      taskKey: "",
      instanceId: ""
    }
  },
  created() {
    this.initTaskList()
    getDeployList().then(res => {
      this.deploys = res.data
    })
  },
  methods: {
    initTaskList() {
      getTasksById(this.user).then(res => {
        console.log(res)
        this.data = res.data
      })
    },
    showForm(row) {
      let {processInstanceId, taskDefinitionKey} = row
      getFormData(processInstanceId).then(res => {
        this.formData = res.data
        console.log("数据", res.data)
      })
      getTaskForm(processInstanceId).then(res => {
        try {
          this.formStyle = JSON.parse(res.data)
          console.log("表单样式", this.formStyle)
        } catch (e) {
          console.log(e)
        }
      })
      this.instanceId = processInstanceId
      this.taskKey = taskDefinitionKey
    },
    startFlow(id) {
      start(id,this.user).then(res => {
        console.log(res.data)
        this.initTaskList()
      })
    },
    submit(value) {
      submitTask(this.instanceId,this.user, value).then(res => {
        this.formStyle = ""
        this.initTaskList()
        this.$message.info(res.data)
      })
    }
  }
}
</script>

<style scoped>

</style>